<!-- 调拨管理 -->
<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    />
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.dbdh2')"
        prop="orderId"
        min-width="300"
      />
      <el-table-column align="center" :label="$t('message.spxx')" min-width="200" prop="type" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.goodsList&& scope.row.goodsList.length > 0?scope.row.goodsList[0].name +'x'+ scope.row.goodsList[0].count: '' }}
          <span style="word-spaceing: 10px" />
          <span style="word-spaceing: 10px" />
          <el-button
            v-if="scope.row.goodsList.length > 1"
            size="small"
            @click="toShowGoodsList(scope.row.goodsList)"
          >
            <i class="el-icon-more" />
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.fhcg2')"
        show-overflow-tooltip
        prop="venueName"
        min-width="200"
      />
      <el-table-column align="center" :label="$t('message.status')" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          {{
            scope.row.status == 0
              ? $t('message.drk')
              : scope.row.status == 1
                ? $t('message.yrk') : ""
          }}
        </template></el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.czy')"
        prop="creator"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column
        align="center"
        :label="$t('message.bz')"
        prop="info"
        min-width="200"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.dbsj')"
        min-width="160"
        show-overflow-tooltip
        prop="createDate"
      />
      <el-table-column :label="$t('message.caozuo')" min-width="100" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <span v-if="scope.row.status == 1">-</span>
            <el-button
              v-if="scope.row.status == 0 && meta.indexOf('AllotStorageManagerAdd') > -1"
              type="text"
              @click="putStorage(scope.row.id)"
            >{{ $t('message.rk') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <el-dialog
      :title="$t('message.splb')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showMoreGoods"
      :before-close="moreGoodsWillClose"
    >
      <el-table :data="showGoodsList" border fit class="doumee-element-table">
        <el-table-column
          align="center"
          :label="$t('message.spmc')"
          prop="name"
        />

        <el-table-column
          align="center"
          :label="$t('message.spjg')"
          prop="price"
        />
        <el-table-column
          align="center"
          :label="$t('message.dbsl')"
          prop="count"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
import { parseTime } from '@/utils'
import { inventoryList, inventoryConfirm } from '@/api'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'AllotStorageManager',
  components: {
    QueryForm
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [{
          filed: 'orderId',
          type: 'input',
          label: this.$t('message.dbdh2'),
          clearable: true
        }, {
          filed: 'time',
          type: 'daterange',
          clearable: true
        }],
        online: true
      },
      modalDialog: store.getters.dialog,
      meta: [],
      totalCount: 0,
      listLoading: true,
      list: [],
      showGoodsList: [],
      showMoreGoods: false,
      filters: {
        time: []
      },
      pagination: {
        page: 1,
        rows: 10
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      pagination.firstQueryTime = parseTime(new Date())
      if (filters.time && filters.time.length > 0) {
        filters.startTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.startTime = null
        filters.endTime = null
      }
      filters.venueId = sessionStorage.getItem('venueId')
      filters.type = '2'
      this.listLoading = true
      inventoryList({
        pagination,
        param: {
          ...filters
        },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.totalCount = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        })
        .catch((err) => {
          console.log(err)
          this.listLoading = false
        })
    },
    putStorage(id) {
      this.$confirm(this.$t('message.rksptc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          inventoryConfirm({
            param: {
              id
            }
          })
            .then((res) => {
              if (res.errorCode !== '000000') return
              this.$message.success(this.$t('message.rkcg'))
              this.getList()
            })
            .catch(() => {})
        })
        .catch(() => {
          // this.$message.info('已取消入库')
        })
    },
    toShowGoodsList(item) {
      this.showGoodsList = item
      this.showMoreGoods = true
    },
    moreGoodsWillClose(done) {
      this.showGoodsList = []
      done()
    },
    clear() {
      this.filters = { time: [] }
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
